<template>
	<view>
		<view class="bg-white page-box">
			<image :src="img||''" style="width: 750rpx;height: 380rpx;"></image>
			<view class="form-box">
				<view class="form-label-iten flex align-center">
					<view class="label-name">预约姓名:</view>
					<view class="label-value"><input type="text" :maxlength="6" v-model="name"></view>
				</view>
				<view class="form-label-iten flex align-center">
					<view class="label-name">预约电话:</view>
					<view class="label-value"><input type="number" :maxlength="11" v-model="mobile"></view>
				</view>
				<view class="form-label-iten flex align-center">
					<view class="label-name">来院时间:</view>
					<view class="label-value">
						<picker mode="date" @change="changeDate">
							<view class="flex align-center">
								<view class="picker-value">{{yuyue}}</view>
								<view class="picker-icon">
									<image src="@/static/images/bottom.png" mode="widthFix"></image>
								</view>
							</view>
						</picker>
					</view>
				</view>
				<view class="form-label-iten flex align-center">
					<view class="label-name">预约科室:</view>
					<view class="label-value">
						<picker mode="selector" :range="doctorList" range-key="name" @change="changeDoctor">
							<view class="flex align-center">
								<view class="picker-value">{{doctorList[doctorIndex].name}}</view>
								<view class="picker-icon">
									<image src="@/static/images/bottom.png" mode="widthFix"></image>
								</view>
							</view>
						</picker>
					</view>
				</view>
				<view class="form-label-iten flex align-center">
					<view class="label-name">预约项目:</view>
					<view class="label-value">
						<picker mode="selector" :range="projectList" range-key="name" @change="changeProject">
							<view class="flex align-center">
								<view class="picker-value">{{projectList[projectIndex].name}}</view>
								<view class="picker-icon">
									<image src="@/static/images/bottom.png" mode="widthFix"></image>
								</view>
							</view>
						</picker>
					</view>
				</view>
				<view class="form-label-iten flex align-center">
					<view class="label-name">病情描述:</view>
					<view class="label-value"><input type="text" v-model="desc"></view>
				</view>
				<!-- 			<view class="form-label-iten flex align-center">
				<view class="label-name">挂号费:</view>
				<view class="label-value"><input type="digit" v-model="money" disabled></view>
			</view> -->
			</view>

			<view class="btm-box px-2">
				<view class="btn-submit" @click="submit">在线挂号</view>
			</view>
			<image :src="bottom_img||''" style="width: 750rpx;height: 180rpx;" mode="widthFix"></image>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		postRegisteredSubmit,
		postHospitalInfo,
		postProjectList
	} from '@/api/expert.js'
	import share from '@/shopro/share';
	import store from '@/shopro/store'
	export default {
		data() {
			return {
				yuyue: '请选择来院时间',
				name: '',
				mobile: '',
				desc: '',
				money: 0,
				doctorList: [
					{
						id:0,
						name:'请选择科室'
					}
				],
				doctorIndex: 0,
				projectList: [
					{
						id:0,
						name:'请选择预约项目'
					}
				],
				projectIndex: 0,
				img: '',
				bottom_img: ''

			}
		},
		computed: {
			...mapGetters(['isLogin'])

		},
		onShow() {
			if (!this.isLogin) {
				this.$store.dispatch('showAuthModal', 'accountLogin');
				// this.$u.toast('请先登录');
				// setTimeout(()=>{
				// 	uni.switchTab({
				// 		url:'/pages/index/user'
				// 	})
				// },1000)

			}
			this.doctorIndex=0
			this.doctorList=[{id:0,name:'请选择预约科室'}]
			this.projectIndex=0
			this.projectList=[{id:0,name:'请选择预约项目'}]
			this.getExpert()
			this.getProject(0)
		},
		methods: {
			//获取医院信息
			getExpert() {
				postHospitalInfo().then(res => {
					this.img = res.data.gua_image
					this.bottom_img = res.data.bottom_image
					share.setShareInfo({
						title:'郑州科大医院在线预约挂号',
						params: {
							page: 4
						}
					});
				})
			},
			//获取预约项目列表
			getProject(type){
				var data={
					pid:this.doctorList[this.doctorIndex].id
				}
				postProjectList(data).then(res=>{
					if(type==0){
						// this.doctorList=[]
						res.data.forEach((item,index)=>{
							this.doctorList.push(item)
						})
					}else{
						this.projectList=[{id:0,name:'请选择预约项目'}]
						res.data.forEach((item,index)=>{
							this.projectList.push(item)
						})
					}
				})
			},
			//选择日期
			changeDate(e) {
				this.yuyue = e.detail.value
			},
			//选择医生
			changeDoctor(e) {
				this.doctorIndex = e.detail.value
				this.getProject(1)
			},
			//选择项目
			changeProject(e) {
				this.projectIndex = e.detail.value
			},
			//提交
			submit() {
				if (this.name == '') {
					this.$u.toast('请输入预约姓名');
					return
				}
				if (this.mobile == '') {
					this.$u.toast('请输入预约电话');
					return
				}
				if (this.yuyue == '请选择来院时间') {
					this.$u.toast('请选择来院时间');
					return
				}
				if (this.doctorIndex == 0) {
					this.$u.toast('请选择预约科室');
					return
				}
				if (this.projectIndex == 0) {
					this.$u.toast('请选择预约项目');
					return
				}
				var data = {
					yuyue: this.yuyue,
					name: this.name,
					mobile: this.mobile,
					desc: this.desc,
					money: this.money,
					doctor: this.doctorList[this.doctorIndex].name,
					project: this.projectList[this.projectIndex].name
				}
				postRegisteredSubmit(data).then(res => {
					if (res.code == 1) {
						this.yuyue = '请选择来院时间'
						this.name = ''
						this.mobile = ''
						this.desc = ''
						this.money = ''
						this.doctorIndex = -1
						this.projectIndex = -1
					}
					this.$u.toast(res.msg, 2000);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		width: 100%;
		height: 100%;
		// position: absolute;
		// overflow: scroll;
	}

	.form-box {
		padding: 0 20rpx;

		.form-label-iten {
			width: 100%;
			border-bottom: solid 1rpx #888;
			padding: 46rpx 0 23rpx;

			.label-name {
				font-size: 34rpx;
				font-weight: bold;
				color: #1C1C1C;
				line-height: 1;
				flex-shrink: 0;
				margin-right: 38rpx;
			}

			.label-value {
				width: 100%;
				flex: 1;

				input {
					width: 100%;
				}

				picker {
					.picker-value {
						font-size: 34rpx;
						color: #9B9B9B;
						font-weight: bold;
						margin-right: 21rpx;
						min-width: 200rpx;
					}

					.picker-icon {
						width: 36rpx;

						image {
							width: 100%;
						}
					}
				}
			}
		}
	}

	.btm-box {
		margin-top: 100rpx;

		.btn-submit {
			width: 50%;
			height: 100rpx;
			background: #C11559;
			border-radius: 10rpx;
			color: white;
			font-size: 40rpx;
			line-height: 100rpx;
			text-align: center;
			font-weight: 500;
			margin: 0 auto;
			margin-bottom: 50rpx;
		}
	}
</style>
